<template>
  <flow-detail-content
    v-if="flowDetailStyle === 'default'"
    ref="flowDetailContent"
    :params="params"
    :detail-vue-compnent="detailVueCompnent"
    :view-mode="viewMode"
    :load-component="loadComponent"
  />
  <simple-flow-detail-content
    v-if="flowDetailStyle === 'simple'"
    ref="flowDetailContent"
    :params="params"
    :detail-vue-compnent="detailVueCompnent"
    :view-mode="viewMode"
    :load-component="loadComponent"
  />
</template>
<script>
import { defineAsyncComponent } from 'vue';
const modules = import.meta.glob('@/views/**/*.vue');
export default defineComponent({
  name: 'FlowDetail',
  components: {
    FlowDetailContent: defineAsyncComponent(() => import('./components/flow-detail-content/index.vue')),
    SimpleFlowDetailContent: defineAsyncComponent(() => import('./components/flow-detail-content/SimpleFlowDetail.vue'))
  },
  provide() {
    return {
      flowDetailStyle: this.flowDetailStyle
    };
  },
  props: {
    params: {
      type: [Array, Object],
      default: null
    },
    viewMode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: null,
      detailVueCompnent: shallowRef(),
      flowDetailStyle: window.$config?.flow?.flowDetailStyle || 'default'
    };
  },
  created() {
    if (this.params) {
      this.id = this.params.routeId;
    } else {
      this.id = this.$route.params.id;
    }
    const filePath = decodeURIComponent(this.id).replace(RegExp('_', 'g'), '/');
    if (modules[`/src/${filePath}.vue`]) {
      this.detailVueCompnent = defineAsyncComponent(modules[`/src/${filePath}.vue`]);
    }
  },
  methods: {
    loadComponent(filePath) {
      const component = defineAsyncComponent({
        loader: modules[`/src/${filePath}.vue`],
        // loading: LoadingPage,
        // error: ErrorPage,
        delay: 100,
        timeout: 10000
      });
      return component;
    },
    inModalResize(h) {
      this.$refs.flowDetailContent.inModalResize(h);
    }
  }
});
</script>
<style lang="css" scoped>
body {
  padding-top: 96px;
}
</style>
